<template>
    <div>
		<el-form style="margin-top: 10px;width: 500px;" label-width="100px">
			<el-form-item label="商品名称">
				<el-input v-model="goods.title" placeholder="请输入商品名称,不能超过60个字符"></el-input>
			</el-form-item>
			<el-form-item label="头像">
			  <div style="width: 80px;">
				  <el-button icon="el-icon-plus" @click="addHeadImgBox = true" v-if="goods.cover == ''" ></el-button>
				  <el-image :src="goods.cover" v-else style="width: 60px;height: 60px;" @click="addHeadImgBox = true"/>
			  </div>
			</el-form-item>
			<el-form-item label="商品分类">
				<el-select v-model="goods.category_id" placeholder="请选择商品分类">
					<el-option v-for="item in goodsCate" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="商品描述">
				<el-input v-model="goods.desc" type="textarea" placeholder="填写商品描述"></el-input>
			</el-form-item>
			<el-form-item label="商品单位">
				<el-input v-model="goods.unit" placeholder="请输入商品单位"></el-input>
			</el-form-item>
			<el-form-item label="总库存">
				<el-input type="number" v-model="goods.stock">
					<el-button slot="append" type="info">件</el-button>
				</el-input>
			</el-form-item>
			<el-form-item label="库存预警">
				<el-input type="number" v-model="goods.min_stock">
					<el-button slot="append" type="info">件</el-button>
				</el-input>
			</el-form-item>
			<el-form-item label="最低销售价">
				<el-input type="number" v-model="goods.min_oprice">
					<el-button slot="append" type="info">元</el-button>
				</el-input>
			</el-form-item>
			<el-form-item label="最低原价">
				<el-input type="number" v-model="goods.min_price">
					<el-button slot="append" type="info">元</el-button>
				</el-input>
			</el-form-item>
			<el-form-item label="库存显示">
				<div>
				  <el-radio v-model="goods.stock_display" label="1" border size="mini">是</el-radio>
				  <el-radio v-model="goods.stock_display" label="0" border size="mini">否</el-radio>
				</div>
			</el-form-item>
			<el-form-item label="是否上架">
				<div>
				  <el-radio v-model="goods.status" label="1" border size="mini">放入仓库</el-radio>
				  <el-radio v-model="goods.status" label="0" border size="mini">立即上架</el-radio>
				</div>
			</el-form-item>
			<el-form-item label="运费模板">
				<el-select v-model="goods.express_id" placeholder="请选择商品分类">
					<el-option v-for="item in subGoods" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<div align="right">
			<el-button type="info" size="mini" @click="$router.go(-1)">回到上一页</el-button>
			<el-button type="success" size="mini" @click="addGoods">确 定</el-button>
			<el-button type="success" size="mini" @click="editGoods">修 改</el-button>
		</div>
		
		<!-- 控制添加头像的弹框 -->
		<head_image :addHeadImgBox="addHeadImgBox" @selectImage="selectImage" />
    </div>
</template>

<script>
import head_image from "../common/imgAdmin.vue"
export default {
    props:[],
    components: {head_image},
    data() {
        return {
			goods: {
				id: "",
				title: "",
				cover: "",
				category_id: "",
				desc: "",
				unit: "",
				stock: "",
				min_stock: "",
				min_oprice: "",
				min_price: "",
				stock_display: "0",
				status: "1",
				express_id: "",
				ischeck: 0,
			},
			goodsCate: [], // 商品分类数据
			subGoods: [], // 运费模板数据
			addHeadImgBox: false, // 控制添加头像的弹框
			id: 0, // 商品的id
        };
    },
    created() {

    },
    mounted() {
		// 获取商品分类
		this.getCreate();
		console.log(this.$route.params);
		if(this.$route.params.hasOwnProperty('id')) {
			this.id = this.$route.params.id;
			// 获取商品数据
			this.$axios.get(`/api/admin/goods/read/${this.id}`).then(res => {
				console.log(res);
				this.goods = res.data;
			})
		}
    },
    methods: {
		// 获取商品分类的数据
		getCreate() {
			this.$axios.get("/api/admin/goods/create").then(res => {
				console.log(res);
				this.goodsCate = res.data.cates;
				this.subGoods = res.data.express.list;
			})
		},
		// 将选中的头像添加到添加商品的文本框中
		selectImage(url) {
			this.goods.cover = url
			this.addHeadImgBox = false;
		},
		// 添加商品的操作
		addGoods() {
			if(this.goods.title == "") {
				this.$message.error("商品名称不能为空");
				return false;
			}
			this.$axios.post("/api/admin/goods",this.goods).then(res => {
				console.log(res);
				this.$message.success("添加商品成功");
				this.$router.push("/admin/shop");
			}).catch(error => {
				this.$message.error(error.response.data.msg);
			})
		},
		// 保存修改好的商品数据
		editGoods() {
			this.$axios.post(`/api/admin/goods/${this.goods.id}`,this.goods).then(res => {
				console.log(res);
				this.$message.success("修改商品成功");
				this.$router.push("/admin/shop");
			}).catch(error => {
				this.$message.error(error.response.data.msg);
			})
		}
    },
    computed:{

    },
    watch:{

    }
};
</script>

<style scoped>

</style>
